<ion-header [translucent]="true">
   
    <ion-toolbar>    
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{ folder }}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="prev()" class="_swiper-button-prev">上一题</ion-button>
      <ion-button (click)="next()" class="_swiper-button-next">下一题</ion-button>
      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar>
    <ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">{{ folder }}</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong class="capitalize">{{ folder }}</strong>
    <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI
        Components</a></p>
  </div>

  <swiper-container  _navigation="true" pagination="true" _scrollbar="true" centeredSlides="false" slides-per-view="1" speed="500" loop="false" css-mode="false" mousewheel-force-to-axis="true">
    @for (slide of slides; track slide) {
      <swiper-slide #slide3>
        <ion-card>
          <ion-card-header>
          <ion-card-title>Card Title {{slide.title}}</ion-card-title>
            <ion-card-subtitle>{{slide.title}}</ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            {{slide.content}}
            <br />
            @for (question of slide.questions; track question; let index = $index) {
              <!-- <ion-checkbox labelPlacement="fixed"><ion-chip>{{index+1}}</ion-chip>{{question.title}}</ion-checkbox><br /> -->
              <ion-chip>{{index+1}}</ion-chip>{{question.title}}<br />

            }
            <!-- <ion-list [inset]="false" lines="full"> -->
            <!-- @for (question of slide.questions; track question; let index = $index) {
              <ion-item>
                <ion-checkbox labelPlacement="fixed"><ion-chip>{{index+1}}</ion-chip>{{question.title}}</ion-checkbox><br />
              </ion-item>
            } -->
          <!-- </ion-list> -->
          </ion-card-content>
        </ion-card>
      </swiper-slide>
    }
  </swiper-container>
  
</ion-content>
